<template>
	<view class="earlyWarning">
		<view class="" style="height: 160rpx;">
			<view class="mail_List fixed z_ninetynine">
				<view class="mail" style="font-weight: 700;">
					<view class="order">支付订单详情</view>
				</view>
			</view>
			<view class="icon fixed z_ninetynine">
				<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
			</view>
		</view>
		<!-- 巡更信息 -->
		<view class="">
			<view class="data_Statistics" style="padding: 44rpx 40rpx 0 24rpx;">
				<view class="">
					<text style="font-weight: 700; font-size: 30rpx; color: #0d92ff;">丨</text><text
						style="font-weight: 700; font-size: 30rpx;">停车信息</text>
				</view>
<!-- 				<view class="" style="color: #1997ff;">
					<text>支付金额:</text><text style="margin-left: 26rpx;font-size: 36rpx;">¥ 8</text>
				</view> -->
			</view>
			<view class="card" style="padding: 0 42rpx;">
				<view class="card_left">
					<view class="" style="height: 55%;">
						<image src="/static/workOrder/car.png" mode="" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="" style="text-align: center;color: #1698ff;">
						泊车
					</view>
				</view>
				<view class="card_right">
					<view class="cellName">
						<text style="color: #bfbfbf;">小区名称:</text>
						<text style="margin-left: 56rpx;">城建·世纪阳江</text>
					</view>
					<view class="entryTime">
						<text style="color: #bfbfbf;">进入时间:</text>
						<text style="margin-left: 56rpx;">2021.11.13 16:17:12</text>
					</view>
					<view class="parkingTime">
						<text style="color: #bfbfbf;">停车时长:</text>
						<text style="margin-left: 56rpx;">8小时</text>
					</view>
				</view>
			</view>
			<!-- 巡更信息 -->
					<view class="">
						<view class="data_Statistics" style="padding: 44rpx 40rpx 0 24rpx;">
							<view class="">
								<text style="font-weight: 700; font-size: 30rpx; color: #0d92ff;">丨</text><text
									style="font-weight: 700; font-size: 30rpx;">订单信息</text>
							</view>
			<!-- 				<view class="" style="color: #1997ff;">
								<text>支付金额:</text><text style="margin-left: 26rpx;font-size: 36rpx;">¥ 8</text>
							</view> -->
						</view>
						<view class="card" style="padding: 0 42rpx;">
							<view class="card_left">
								<view class="" style="height: 55%;">
									<image src="/static/workOrder/order.png" mode="" style="width: 100%;height: 100%;"></image>
								</view>
								<view class="" style="text-align: center;color: #1698ff;">
									订单
								</view>
							</view>
							<view class="card_right">
								<view class="cellName">
									<text style="color: #bfbfbf;letter-spacing: 10rpx;" >订单号:</text>
									<text style="margin-left: 48rpx;">JHSD12313234</text>
								</view>
								<view class="entryTime">
									<text style="color: #bfbfbf;">绑定车牌:</text>
									<text style="margin-left: 56rpx;">皖A88888</text>
								</view>
								<view class="parkingTime">
									<text style="color: #bfbfbf;">支付金额:</text>
									<text style="margin-left: 56rpx;">¥ 8</text>
								</view>
							</view>
						</view>
				<view class="card_weChat">
					<u-button type="primary" @click="payment">支<text style="margin-left: 70rpx;">付</text></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 农银支付跳转页面
			payment () {
				this.openUrl('/pagesB/my/drivingPayment/orderDetails/subscriptionInformation/paymentOrder/wechatPayment/wechatPayment')
			}
		}
	};
</script>

<style lang="scss" scoped>
	.earlyWarning {
		.mail_List {
			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				padding: 10rpx 0;
				// margin-top: 96rpx;
				color: #f2f2f2;
				font-size: 40rpx;
				background-color: #2e576f;
			}

			.order {
				text-align: center;
			}
		}

		/deep/.card {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 96%;
			height: 320rpx;
			margin: 20rpx auto 0;
			background-image: url(/static/workOrder/small.png);
			background-size: 100% 100%;
			// background-color: red;
			.card_left {
				    display: flex;
				    flex-direction: column;
				    justify-content: space-evenly;
				width: 11%;
				height: 40%;
				// margin: auto;
				// background-color: pink;
			}
			.card_right {
				    display: flex;
				    flex-direction: column;
				    justify-content: space-between;
				width: 76%;
				height: 58%;
				// margin: auto;
				// background-color: pink;
			}
		}
		.card_bottom {
			    display: flex;
			    flex-direction: column;
			    justify-content: space-between;
			width: 70%;
			height: 195rpx;
			margin: 0 auto;
			// background-color: red;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 100rpx;
			.choice {
				    display: flex;
				    justify-content: space-between;
			}
			.payment {
				display: flex;
				justify-content: space-around;
				width: 100%;
				height: 51%;
				// background-color: pink;
			}
		}
		.card_weChat {
			width: 70%;
			margin: 0 auto;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 100rpx;
		}

		.icon {
			position: absolute;
			top: 18rpx;
			left: 20rpx;
		}

		.data_Statistics {
			    display: flex;
			    justify-content: space-between;
		}
	}
</style>
